<template>
    <div>
    <!-- <el-button type="danger">危险按钮</el-button> -->

    <!-- <draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
    </draggable> -->

        <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="450">
                  <template slot-scope="scope">
                      <draggable v-model="scope.row.date" :options="{group:'people'}" @start="drag=true" @end="drag=false">
                      <div v-for="element in scope.row.date" :key="element.id" class="drag">{{element.name}}</div>
                      </draggable>
                  </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" ></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button  size="mini" type="primary" @click="handleTop(scope.$index, scope.row)">
                            置顶
                      </el-button>
                      <el-button size="mini"  type="danger"  @click="handleLast(scope.$index, scope.row)">
                           末尾
                      </el-button>
                  </template>
              </el-table-column>
        </el-table>
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    name: "HelloWorld",
    components: {
    draggable
  },
  data() {
      return {
          myArray: [{
              id: 1,
              name: "one"
            },
            {
              id: 2,
              name: "teo"
            },
            {
              id: 3,
              name: "three"
            }
          ],
          tableData: [
            {
                date: [
                    {
                        id: 1,
                        name: "这是第一个表格"
                    },
                    {
                        id: 2,
                        name: "你大爷还是你大爷"
                    },
                    {
                        id: 3,
                        name: "three"
                    }
                ],
                name: "王小虎",
                address: "上海市普陀区金沙江路 1518 弄"
            },
            {
                date: [
                    {
                        id: 1,
                        name: "这是第二个表格"
                    },
                    {
                        id: 2,
                        name: "你妹不是你妹"
                    }
                ],
                name: "王小虎",
                address: "上海市普陀区金沙江路 1517 弄"
            },
            {
                date: [
                    {
                        id: 1,
                        name: "这是第三个表格"
                    },
                    {
                        id: 2,
                        name: "你哥就是你哥"
                    }
                ],
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄"
            },
            {
                date: [
                    {
                        id: 1,
                        name: "这是第四个表格"
                    },
                    {
                        id: 2,
                        name: "呵呵呵呵呵"
                    }
                ],
                name: "王小虎",
                address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
      };
  },
  methods: {
      handleTop(index, value) {
          let data = this.tableData[index];
          this.tableData.splice(index, 1);
          this.tableData.unshift(data);
      },
      handleLast(index, value) {
          let data = this.tableData[index];
          this.tableData.splice(index, 1);
          this.tableData.push(data);
      }
  }
};
</script>


<style scoped>
.drag {
    margin-right: 15px;
    float: left;
}
</style>

